<ion-card class="ion-activatable" [class.core-course-list-item]="layout === 'list' || layout === 'listwithenrol'"
    [class.core-course-list-card]="layout === 'card' || layout === 'summarycard'" [class.item-dimmed]="course.hidden" (click)="openCourse()"
    tappable [attr.aria-label]="course.displayname || course.fullname">

    @if (layout === 'card' || layout === 'summarycard') {
        <core-course-image [course]="course" class="card-top" />
    }

    <ion-item class="ion-text-wrap">

        @if (layout === 'list' || layout === 'listwithenrol') {
            <core-course-image [course]="course" />
        }

        <ion-label>
            <div class="core-course-maininfo">
                @if (course.displayname && course.shortname && course.fullname !== course.displayname) {
                    <p class="core-course-shortname core-course-additional-info">
                        <core-format-text [text]="course.shortname" contextLevel="course" [contextInstanceId]="course.id" />
                    </p>
                }

                <p class="item-heading">
                    @if (course.isfavourite) {
                        <ion-icon name="fas-star" [attr.aria-label]="'core.courses.favourite' | translate" />
                        <span class="sr-only">{{ 'core.courses.aria:favourite' | translate }}</span>
                    }

                    <span (ariaButtonClick)="openCourse()">
                        <span class="sr-only">{{ 'core.courses.aria:coursename' | translate }}</span>
                        <core-format-text [text]="course.fullname" contextLevel="course" [contextInstanceId]="course.id" />
                    </span>

                    @if ((layout === 'list' || layout === 'listwithenrol') && !isEnrolled) {
                        <span class="core-course-enrol-icons">
                            @for (icon of enrolmentIcons; track icon.label) {
                                <ion-icon color="medium" [name]="icon.icon" [title]="icon.label | translate"
                                    [attr.aria-label]="icon.label | translate" [class]="icon.className" />
                            }
                        </span>
                    }

                    @if (prefetchCourseData.downloadSucceeded) {
                        <ion-icon class="core-icon-downloaded" name="fam-cloud-done" color="success" role="status"
                            [attr.aria-label]="'core.downloaded' | translate" />
                    }
                </p>

                @if (course.categoryname) {
                    <ion-chip color="primary" class="core-course-category core-course-additional-info ion-text-nowrap">
                        <span class="sr-only">{{ 'core.courses.aria:coursecategory' | translate }}</span>
                        <ion-label>
                            <core-format-text [text]="course.categoryname" contextLevel="coursecat"
                                [contextInstanceId]="course.categoryid" />
                        </ion-label>
                    </ion-chip>
                }

                @if (course.visible === 0) {
                    <ion-chip color="info" class="core-course-additional-info ion-text-wrap core-course-hidden-message">
                        <ion-label>
                            {{ 'core.course.hiddenfromstudents' | translate }}
                        </ion-label>
                    </ion-chip>
                }
            </div>

            @if (layout !== 'summarycard' && isEnrolled && progress >= 0 && completionUserTracked !== false) {
                <div class="core-course-progress">
                    <core-progress-bar [progress]="progress" a11yText="core.courses.aria:courseprogress" />
                </div>
            }
        </ion-label>
    </ion-item>

    @if (isEnrolled && layout !== 'summarycard') {

        @if (!courseOptionMenuEnabled && showDownload) {
            <div class="core-button-spinner">
                <core-download-refresh [status]="prefetchCourseData.status" [enabled]="showDownload"
                    [statusesTranslatable]="statusesTranslatable" [canTrustDownload]="false" [loading]="prefetchCourseData.loading"
                    (action)="prefetchCourse()" />
            </div>
        }

        @if (courseOptionMenuEnabled) {
            <div class="core-button-spinner">
                @if (!showSpinner) {
                    <!-- Options menu. -->
                    <ion-button fill="clear" (click)="showCourseOptionsMenu($event)" [ariaLabel]="('core.displayoptions' | translate)">
                        <ion-icon name="ellipsis-vertical" slot="icon-only" aria-hidden="true" />
                    </ion-button>
                } @else {
                    <!-- Loading options course spinner. -->
                    <ion-spinner [attr.aria-label]="'core.loading' | translate" />
                }
            </div>
        }

    }

    <ion-ripple-effect />
</ion-card>
